<template>
  <div class="mainBg">
    <div class="cann" id="canvas"/>
    <Spin size="large" fix v-if="switches.loadImgStatus"></Spin>
    <transition name="slide-fade">
    <Pupus ref="popus" :left="position.left" :top="position.top" :did="clickOne" v-if="visible"></Pupus>
    </transition>
  </div>
</template>

<script>
  import '../../../static/qunee/Popup'
  import Pupus from '../modules/Pupus'
  import {FlowingSupport} from '../../../static/qunee/flowPrototype'
  export default {
    name: 'Testt',
    components: {Pupus},
    mounted: function () {
      this.initGraph()
      setTimeout(() => { this.loadImgData() }, 100)
    },
    data: function () {
      return {
        graph: null,
        flowObj: null,
        imgSystem: {},
        visible: false,
        clickOne: null,
        ifResize: false,
        position: {
          left: 0,
          top: 0
        },
        switches: {
          loadImgStatus: false // 加载状态
        },
        events: {
          onmousewheel: (evt, graph) => {
            console.log('onmousewheel')
            this.visible = false
          },
          ondrag: (evt, graph) => {
            console.log('ondrag')
            this.visible = false
          },
          onclick: (evt) => {

            if (evt.getData() instanceof Q.Node) {
            console.log('onmousewheel', evt.getData())
              // 染色
              evt.getData().setStyle(Q.Styles.RENDER_COLOR, '#0bc40d')
              evt.getData().setStyle(Q.Styles.RENDER_COLOR_BLEND_MODE, Q.Consts.BLEND_MODE_GRAY)
            }

          },
          ondblclick: (evt, graph) => {
            if (!evt.getData()) {
              return
            }
            let clickObj = evt.getData()

            if (clickObj instanceof Q.Node) {
              if (this.clickOne === clickObj.get('did') && this.visible) {
                return
              }
              // 图元的 宽度 高度
              let wh = graph.getUI(clickObj).bodyBounds
              // 把图元中心点 左边转为 window的 坐标
              let ll = graph.toCanvas(wh.center.x, wh.center.y)

              let xx = parseInt(ll.x) + 205 + wh.width + (this.ifResize ? -145 : 0)
              let yy = parseInt(ll.y) + 100 - wh.height
              // 先销毁，以免数据还在
              this.visible = false
              this.position = {
                left: xx,
                top: yy
              }
              this.clickOne = clickObj.get('did')
              setTimeout(() => { this.visible = true }, 200)
            } else {
               this.visible = false
            }
          },
          onmousemove: (evt, graph) => {
            let ui = graph.getUIByMouseEvent(evt)
            if (ui && ui.data instanceof Q.Node) {
              graph.cursor = 'pointer'
              return
            }
              graph.cursor = null
          }
        }
      }
    },
    methods: {
      initGraph: function () {
        // 初始化 拓扑图
        if (this.graph === null) {
          this.graph = new Q.Graph('canvas')
          // 禁止双击 放大
          this.graph.enableDoubleClickToOverview = false
          // 设置提示贴
          this.graph.enableTooltip = false
          this.graph.tooltipDelay = 0
          this.graph.tooltipDuration = 100000
          // 只读
          this.graph.interactionMode = Q.Consts.INTERACTION_MODE_VIEW
          // 添加 一些事件
          this.graph.addCustomInteraction(this.events)
          // 添加一些样式
          this.graph.styles = {}
          this.graph.styles[Q.Styles.SELECTION_COLOR] = '#05ff63'
          this.graph.styles[Q.Styles.SELECTION_SHADOW_BLUR] = Q.Consts.SELECTION_TYPE_SHADOW
          // 添加动画
          this.flowObj = new FlowingSupport(this.graph)
        }
      },
      loadImgData: function () {
        this.switches.loadImgStatus = true
        // 加载 系统图的 数据
        window.myapi.do_get('/sysimg/info/15').then(resp => {
          if (resp.status === 200 && resp.data.status === 200) {
            this.imgSystem = resp.data.data
          // 把json 数据转为 视图的方法
          this.graph.parseJSON(this.imgSystem.layoutData)
            // 添加状态小点
            this.graph.forEach(item => {
            if (item instanceof Q.Node) {
              this.addStatusUI(item)
            }
            if (item instanceof Q.Edge) {
              // 添加流动的效果
              this.flowObj.addFlowing(item, 2, true)
            }
            })
          } else {
            this.$Notice.error({
              title: '提示',
              desc: resp.data.msg
            })
          }
        }).catch(reason => {
          this.$Notice.warning({
            title: '提示',
            desc: '加载数据有误，请检查.......'
          })
        }).finally(() => {
          this.switches.loadImgStatus = false
          this.flowObj.start()
        })
      },
      addStatusUI: function (node) {
        // 给Node 添加状态小点
        console.log('node,1', node)
        let statusIcon = new Q.ImageUI()
        statusIcon.anchorPosition = {x: 10, y: -2}
        statusIcon.position = Q.Position.RIGHT_TOP
        statusIcon.data = Q.Shapes.getShape(Q.Consts.SHAPE_CIRCLE, 10, 10)
        statusIcon.fillGradient = new Q.Gradient(Q.Consts.GRADIENT_TYPE_RADIAL, ['#1bdd38'])
        node.addUI(statusIcon)
        // 测试
      }
    },
    watch: {
      listenNav: function (newOne, oldOne) {
        if (newOne) {
          // 伸长的
          this.position.left = this.position.left - 145
        } else {
          // 缩小的
          this.position.left = this.position.left + 145
        }
        this.ifResize = newOne
      }
    },
      computed: {
      listenNav () {
        return this.$store.state.nav_resize
      }
    }
  }
</script>

<style scoped>
.mainBg {
  width: 100%;
  height: 800px;
  padding: 5px;
}

.cann {
  height: 100%;
  width: 100%;
  border: 1px solid #ded9d9;
  background: #EEE;
}

#popup {
  padding: 5px 20px 5px 5px;
  min-width: 200px;
  text-align: center;
  background-color: #d6c757de;
  border: solid 1px #d4d4cd;
  display: none;
  position: absolute;
  margin-top: 10px;
  border-radius: 3px;
}
  /*动画样式start*/
  .slide-fade-enter-active {
    transition: all .3s ease;
  }

  .slide-fade-leave-active {
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */
  {
    transform: translateX(10px);
    opacity: 0;
  }
  /*动画样式end*/
</style>
